<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">管理员登录界面</div>
      <el-form :model="paramphone" :rules="rulesphone" ref="phonelogin" label-width="0px" class="ms-content"
               v-show="usephone">
        <el-form-item>
          <el-button type="text" @click="isPassword=false">手机登录</el-button>
          <el-button type="text" class="pass" @click="isPassword=true">账号密码</el-button>
        </el-form-item>

        <el-form-item prop="phone">
          <el-input v-model="paramphone.phone" placeholder="手机号">
            <el-button slot="prepend" icon="el-icon-mobile-phone"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item prop="password" v-if="isPassword">
          <el-input v-model="paramphone.password" show-password placeholder="密码">
            <el-button slot="prepend" icon="el-icon-key"></el-button>
          </el-input>
        </el-form-item>

        <el-form-item prop="code" v-else>
          <div style="display: flex;flex-direction: row;justify-content: center;align-items: center">
            <el-input
                placeholder="验证码"
                v-model="paramphone.code"
                onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                maxlength="8"
            >
            </el-input>
            <el-button type="primary" @click.native.prevent="SendCode"
                       :disabled="disabled=!show">
              <span v-show="show">验证码</span>
              <span v-show="!show" class="count">{{ count }} </span>
            </el-button>
          </div>
        </el-form-item>

        <div class="login-btn" style="display: flex;align-items: center">
          <el-button style="width: 60%" type="primary" @click="submitFormphone()">登录</el-button>
          <el-button style="width: 60%" @click="toRegister">注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "AdminLogin",
  data: function () {
    return {
      isPassword: false,
      paramphone: {
        phone: '',
        password: '',
        code: ""
      },
      rulesphone: {
        phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      },
      phone: this.isphone,
      show: true,  // 初始启用按钮
      count: '',   // 初始化次数
      timer: null,
      codeNumber: '',
      isSendCode: false,
      number: false,
      usephone: true,
      radio: ""
    };
  },
  methods: {
    toAdmin() {
      this.$router.push("/adminLogin")
    },
    submitFormphone() {
      if (this.isPassword) {
        if (this.paramphone.phone == "" || this.paramphone.password == "") {
          this.$message.error("请输入完整信息")
          return
        }
        this.$http.post("/login/login", this.paramphone).then(data => {
          console.log(data)
          if (data.code == 200) {
            // if(data.data.info=="your phone is none"){
            //   this.$message.error("your phone is none")
            //   return
            // }

            this.$store.commit('setToken', data.data.token)

            this.$router.push('/manageDynamic');
            console.log("进来了")
          }
        })
      } else {
        if (this.paramphone.phone == "" || this.paramphone.code == "") {
          this.$message.error("请输入完整信息")
          return
        }
        this.$http.post(
            '/login/getTokenByPhoneCode',
            this.paramphone
        ).then(data => {
          console.log(data)
          if (data.data.info == "success") {
            this.$store.commit('setToken', data.data.token)
            this.$router.push('/index');
          } else {
            this.$message.error('请输入正确的手机号或者验证码');
            console.log('error submit!!');
            return false;
          }
        })
      }


      // this.$refs.phonelogin.validate(valid => {
      //   if (!valid) {
      //     this.$message.error('请输入手机号和验证码');
      //     return
      //   }

      // });
    },
    SendCode() {
      this.isSendCode = true;
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);  // 清除定时器
            this.timer = null;
          }
        }, 1000)
      }
      let data = {
        phone: this.paramphone.phone
      }
      this.$http.post(
          '/login/loginwithcode',
          data
      ).then(data => {
        console.log(data)
      })
    },
    submitForm() {

      this.$refs.login.validate(valid => {
        if (!valid) {
          this.$message.error('请输入学号和密码');
          return
        }
        this.$http.post(
            '/login/getTokenByNumber',
            this.param
        ).then(data => {
          console.log(data);
          if (data.data.info == "success") {
            this.$store.commit('setToken', data.data.token)
            this.$router.push('/StudyTalking');
          } else {
            this.$message.error('请输入正确的账号和密码');
            console.log('error submit!!');
            return false;
          }
        })
      });
    },
    toRegister() {
      this.$router.push("/register")
    }
  },
}
</script>

<style scoped>
.pass {
  color: #9d9898
}

.pass:hover {
  color: #cec5c5
}

label {
  height: 20px;
  width: 54px;
  /*float: left;*/
  position: relative;
  /*top: 50%;*/
  left: 25%;
  color: white;
  /*transform: translate(-50%, -50%);*/
}

.login-wrap {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(../assets/admin.png);
  background-size: 100%;
}

.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: #e3d2d2;
  border-bottom: 1px solid #ddd;
}

.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.ms-content {
  padding: 30px 30px 20px 30px;
}

.login-btn {
  text-align: center;
  height: 75px;
  margin-top: 25px;
}

.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}


.bg-purple {
  /*background: #d3dce6;*/
}

.grid-content {
  border-radius: 4px;
  min-height: 70px;
}

.row-bg {
  padding: 10px 0;
}

.el-row--flex {
  clear: both;
  margin-top: 0px;
}
</style>